<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>数据绑定</title>
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <!-- Vue有两种数据绑定的方式
             1.单向绑定（v-bind）：数据只能从data流向页面
             2.双向绑定（v-model）：数据可以从data流向页面，页面也可以改变data
                备注：
                1、双向绑定一般应用于表单类元素上，input、select
                2、v-model:value 可以简写成v-model，因为v-model默认收集的就是value值 -->
        <!-- 准备好一个容器，名字是root -->
        <div id="root">
            单向数据绑定<input type="text" v-bind:value="name"></input><br/>
            双向数据绑定<input type="text" v-model:value="name"></input><br/>
            <!-- 简写 -->
            单向数据绑定<input type="text" :value="name"></input><br/>
            双向数据绑定<input type="text" v-model="name"></input><br/>
            <!-- 下面代码是错误的，只能用在表单类元素上面，输入类标签 -->
             <!-- <h2 v-bind:x="name">你好</h2> -->
        </div>

        <script type="text/javascript">
            Vue.config.productionTip = false  // 阻止Vue在启动时生成生产提示，不起作用，直接改了vue.js中的值
            // 创建Vue实例
            new Vue({
                el:'#root', // el用于指定当前Vue实例为哪个容器服务，就是id选择器，如果上面是class = 'root',那这里就是el:'.root'
                //el:document.getElementById('root') //和上面是一样的
                data:{  //data中用于存储数据，数据供el所指定的容器去使用
                    name:'张三'
                }
            })
        </script>

        
    </body>
</html>